<template>
   <li 
      @click="selectOptionClick"
      v-show="visible" 
      class="le-select-dropdown-item"
      :class="{'selected': itemSelected,'hover': 'hover'}"
    >
       <slot>
           <span>{{currentLabel}}</span>
       </slot>
   </li>
</template>

<script>
import { getValueByPath } from '@/utils/util'
import Emitter from '@/mixins/emitter'
    export default {
        name: 'LeOption',
        inject: ['select'],
        mixins: [ Emitter ],
        props: {
            value: {
                required: true
            },
            label: [String, Number],
            created: Boolean,
            disabled: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                visible: true
            }
        },
        watch: {
            value(val, oldVal) {
                console.log(val,oldVal);
                this.dispatch('lESelect', 'setSelected');
            }
        },
        computed: {
            isObject() {
                return Object.prototype.toString.call(this.value).toLowerCase() === '[object object]'
            },
            currentLabel() {
                // 有label就展示label 没有label就展示value 
                // value的值如果是对象就返回空字符串
                console.log(this.label);
                return this.label || (this.isObject ? '' : this.value);
            },
            itemSelected() {
                if(!this.select.miltipe) {
                    return this.isEqual(this.value, this.select.value)
                }else {
                    return this.contains(this.select.value, this.value)
                }
            }
        },
        methods: {
            isEqual(a,b) {
              if(!this.isObject) {
                return a ===b;
              }else {
                const valueKey = this.select.valueKey;
                return getValueByPath(a, valueKey) === getValueByPath(b, valueKey)
              }
            },
            contains(arr = [], target) {
                if(!this.isObject) {
                    return arr && arr.indexOf(target) > -1;
                } else {
                    const valueKey = this.select.valueKey;
                    return arr && arr.some(item => {
                        return getValueByPath(item, valueKey) === getValueByPath(target, valueKey);
                    })
                }
            },
            selectOptionClick() {
                this.dispatch('LeSelect','handleOptionClick', [this,true])
            }
        },
        created() {
            // this.select.option.push(this);
        },
    }
</script>

<style lang="scss" scoped>
.le-select-dropdown-item {
    font-size: 14px;
    padding: 0 20px;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #606266;
    height: 34px;
    line-height: 34px;
    box-sizing: border-box;
    cursor: pointer;
    &:hover {
        background-color: #FFFFFF;
    }
    &.selected {
      color: #409EFF;
      font-weight: bold;
    }
}
</style>